import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import AtComponent from '../../common/component'

export default class AtList extends AtComponent {
  render() {
    const { customStyle, className, labelPadding, renderHeader, renderFooter } = this.props
    const rootClass = classNames(
      'at-list',
      {
        'at-list--no-border': !this.props.border,
        'at-list--padding-left': labelPadding
      },
      className
    )
    return (
      <View className={rootClass} style={customStyle}>
        {renderHeader()}
        {this.props.children}
        {renderFooter()}
      </View>
    )
  }
}

AtList.defaultProps = {
  border: true,
  labelPadding: false,
  renderHeader: () => {},
  renderFooter: () => {}
}

AtList.propTypes = {
  border: PropTypes.bool,
  labelPadding: PropTypes.bool,
  renderHeader: PropTypes.func,
  renderFooter: PropTypes.func
}
